<template>
    <div class="flex_row_center card2 p5 ">
        <label>{{ props.name }}</label>
        <div class="ml5 point" :style="{backgroundColor: bkcolor}"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';


interface Props {
    name: string,
    value: boolean,
}

const props = defineProps<Props>();

const bkcolor = ref('gray');

function update() {
    if (props.value) {
        bkcolor.value = 'red';
    } else {
        bkcolor.value = 'gray';
    }
}

update();

watch(props, () => {
    update();
})

</script>

<style scoped>

.point {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

</style>



